<template>
  <div id="logo" class="gradient_text">
    <span v-for="(digit, index) in clockLogo"
          :key="index"
          :class="['logo_font']"
          :style="digit.style"
          v-if="logoMode === 'time'"
    >
      {{digit.value}}
    </span>

    <span class="logo_font gradient_text" v-else>
      {{!logoText ? 'LogoText' : logoText}}
    </span>
  </div>
</template>

<script>

export default {
  props: ['logoMode', 'logoText'],
  components: {
  },
  data() {
    return {
      currentTime: {
        showColon: false,
        hoursTens: 0,
        hoursOnes: 0,
        minutesTens: 0,
        minutesOnes: 0
      },
    }
  },
  computed: {
    // 时钟LOGO
    clockLogo() {
      const {hoursTens, hoursOnes, minutesTens, minutesOnes, showColon} = this.currentTime;
      return [
        {value: hoursTens, class: 'logo_font_blue'},
        {value: hoursOnes, class: 'logo_font_yellow'},
        {
          value: showColon ? ':' : '\u00A0',
          class: 'logo_font_purple colon',
          style: {
            color: '#5532F1',
            width: '25px',
            textAlign: 'center',
            opacity: showColon ? 0.8 : 0,
            transform: `scale(${showColon ? 0.7 : 0.6})`
          }
        },
        {value: minutesTens, class: 'logo_font_green'},
        {value: minutesOnes, class: 'logo_font_red'}
      ]
    }
  },
  methods: {

    // 初始化当前页面数据
    initPageData() {
      // 更新当前时间
      this.updateCurrentTime()
    },
    // 更新时间
    updateCurrentTime() {
      const now = new Date();
      const hours = now.getHours();
      const minutes = now.getMinutes();

      this.currentTime = {
        showColon: !this.currentTime.showColon,
        hoursTens: Math.floor(hours / 10),
        hoursOnes: hours % 10,
        minutesTens: Math.floor(minutes / 10),
        minutesOnes: minutes % 10
      };
    },
  },
  mounted() {
    // 初始化数据
    this.initPageData();
    // 设置定时器
    this.updateCurrentTimer = setInterval(this.updateCurrentTime, 1000);
  },

  beforeDestroy() {
    clearInterval(this.updateCurrentTimer);
  }
}
</script>

<style>

@font-face {
  font-family: 'BMJUA';
  src: url('@/assets/fonts/BMJUA_otf.otf') format('opentype');
}
#logo {
  display: flex;
  text-align: center;
  float: left;
  user-select: none;
}
.gradient_text {
  background-image: linear-gradient(90deg,#2f8eff 0%, #402aff 53%, #ff6f80 100%);
  background-clip: text;
  color: transparent;
}
.colon {
  display: inline-block;
  opacity: 1;
  transform: scale(1);
  transition: opacity 1s cubic-bezier(0.4, 0, 0.2, 1), transform 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.logo_font {
  font-size: 90px;
  font-family: "BMJUA", serif;
}

.logo_font_blue {
  color: #306CFF;
}

.logo_font_red {
  color: #E22B28;
}

.logo_font_purple {
  color: #AD3DA4;
}

.logo_font_yellow {
  color: #F9B00B;
}

.logo_font_green {
  color: #2D9B41;
}
</style>